.doc-code
  margin: 0
  position: relative
  overflow: auto
  border-radius: inherit

  code
    display: block
    padding: 16px
    width: fit-content
    min-width: 100%

    font-size: ($font-size - 2px)
    font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace
    line-height: 1.5em
    tab-size: 2
    text-align: left
    white-space: pre
    word-spacing: normal
    word-break: normal
    word-wrap: normal
    hyphens: none

    color: inherit
    background-color: inherit
    border-radius: inherit

  &--copying
    .c-lpref,
    .c-line,
    .token.deleted-sign,
    .token.prefix
      display: none

.c-line
  position: relative
  display: block
  width: 100%
  height: 0
  &:before
    content: ' '
    position: absolute
    pointer-events: none
    top: 0
    left: -16px
    right: -16px
    height: 1.5em

.c-lpref
  position: sticky
  pointer-events: none
  user-select: none
  left: 8px
  padding: 0 16px 0 8px
  margin: -16px 0 -16px -8px
  &:before
    border-right: 1px solid
    content: ''
    position: absolute
    pointer-events: none
    top: -1px
    left: -8px
    right: 8px
    bottom: -2px
    z-index: -1

.c-add:before,
.token.inserted-sign:before
  background: rgba($positive, .2)

.token.deleted-sign,
.token.inserted-sign
  position: relative
  display: block
  width: 100%

  &:before
    content: ''
    position: absolute
    pointer-events: none
    top: 0
    left: -16px
    right: -16px
    bottom: 0

.token.prefix
  margin-right: 8px

body.body--light
  .doc-code
    color: $grey-9
    background-color: $light-pill

  .c-highlight:before
    background: rgba($grey, .2)
  .c-rem:before,
  .token.deleted-sign:before
    background: rgba($negative, .2)

  .c-lpref
    color: $header-btn-color--light
    &:before
      border-right-color: $separator-color
      background: $light-pill

  .token.comment,
  .token.block-comment,
  .token.prolog,
  .token.doctype,
  .token.cdata
    color: #7D8B99

  .token
    &.punctuation
      color: #5F6364
    &.important
      font-weight: 400
    &.bold
      font-weight: 700
    &.italic
      font-style: italic
    &.entity
      cursor: help

  .token.property,
  .token.tag,
  .token.boolean,
  .token.number,
  .token.function-name,
  .token.constant,
  .token.symbol,
  .token.deleted
    color: #c92c2c

  .token.selector,
  .token.attr-name,
  .token.string,
  .token.char,
  .token.function,
  .token.builtin,
  .token.inserted
    color: #2f9c0a

  .token.operator,
  .token.entity,
  .token.url,
  .token.variable
    color: #da5a20

  .token.atrule,
  .token.attr-value,
  .token.keyword,
  .token.class-name
    color: #1990b8

  .token.regex,
  .token.important
    color: #e90

  .language-css .token.string,
  .style .token.string
    color: #a67f59
    background: rgba(255, 255, 255, 0.5)

  .namespace
    opacity: .7

  .token.tab:not(:empty):before,
  .token.cr:before,
  .token.lf:before
    color: #e0d7d1

body.body--dark
  .doc-code
    color: #f8f8f2
    background-color: $dark-pill

  .c-highlight:before
    background: rgba($grey-3, .2)
  .c-rem:before,
  .token.deleted-sign:before
    background: rgba($red, .3)

  .c-lpref
    color: $header-btn-color--dark
    &:before
      border-right-color: $separator-dark-color
      background: $dark-pill

  .token.comment,
  .token.prolog,
  .token.doctype,
  .token.cdata
    color: #d4d0ab

  .token.punctuation
    color: #fefefe

  .token.property,
  .token.tag,
  .token.constant,
  .token.symbol,
  .token.deleted
    color: #ffa07a

  .token.boolean,
  .token.number
    color: #00e0e0

  .token.selector,
  .token.attr-name,
  .token.string,
  .token.char,
  .token.builtin,
  .token.inserted
    color: #abe338

  .token.operator,
  .token.entity,
  .token.url,
  .language-css .token.string,
  .style .token.string,
  .token.variable
    color: #00e0e0

  .token.atrule,
  .token.attr-value,
  .token.function
    color: #ffd700

  .token.keyword
    color: #00e0e0

  .token.regex,
  .token.important
    color: #ffd700

  .token.important,
  .token.bold
    font-weight: 700

  .token.italic
    font-style: italic

  .token.entity
    cursor: help
